import React, { useEffect, useState } from "react";
import { Button, ConfigProvider, Row, Col, Layout, Card, FloatButton, Popover, Progress } from "antd";
import dayjs from 'dayjs'
import zh from 'dayjs/locale/zh-cn'
dayjs.locale(zh)
import zh_CN from 'antd/locale/zh_CN'
import styles from "./App.less";
import { api_admin, api_system, ServerInfo } from "./apis"
import { LoginInfo } from "f2e-server3";
import Header from "@/components/header";
import EventsList, { exportAllEvents } from "@/components/events";
import System from "@/components/system";
import UserInfo from "./components/userinfo";
const App = () => {
  const [info, updateInfo] = useState<ServerInfo>()
  const [loginInfo, setUserInfo] = useState<LoginInfo>()
  const [exportProcess, setExportProcess] = useState(0)

  // hot-module-replace demo
  const [ModuleHeader, setModuleHeader] = useState(() => Header)
  useEffect(function () {
    addEventListener('module_update', function (e) {
      if (e['detail'].moduleId === '@/components/header') {
        setModuleHeader(() => require('@/components/header').default)
      }
    })
  }, [])

  useEffect(function () {
    api_admin.getUserInfo().then(res => setUserInfo(res))
    const sse = api_system.server_info(info => {
      updateInfo(info)
    })
    return function () {
      sse?.close()
    }
  }, [])

  return (
    <ConfigProvider locale={zh_CN}>
      <Layout>
        <ModuleHeader now={info?.now} duration={info?.duration} nickname={loginInfo?.user?.nickname} />
        <Layout.Content className="overflow-x-hidden">
          <Row gutter={[16, 16]} className="p-4">
            <Col xs={24} lg={6} className={styles.bodyHeight}>
              <Card title="用户信息" className="h-full overflow-auto" hoverable extra={
                <Button onClick={() => api_admin.getUserInfo().then(res => setUserInfo(res))}>更新</Button>
              }>
                <UserInfo info={loginInfo} />
              </Card>
            </Col>
            <Col xs={24} lg={10} className={styles.bodyHeight}>
              <Card title="系统信息" className="h-full overflow-auto" hoverable>
                <System info={info} />
              </Card>
            </Col>
            <Col xs={24} lg={8} className={styles.bodyHeight}>
              <Card title="更新日志" className="h-full overflow-auto event-list" hoverable extra={<>
                {!!exportProcess && <Progress percent={exportProcess} status="active" style={{ width: 300 }}/>}
                <Button className="pl-2" onClick={() => exportAllEvents({
                    onProcess: (loaded, total) => {
                      setExportProcess(loaded * 100 / total)
                      if (loaded === total) {
                        setExportProcess(0)
                      }
                    },
                  })} loading={exportProcess > 0}>{
                   !!exportProcess? '导出中' : '导出日志'
                  }</Button>
              </>}>
                <EventsList/>
                <FloatButton.BackTop visibilityHeight={100} target={() => document.querySelector<HTMLDivElement>('.event-list')}/>
              </Card>
            </Col>
          </Row>
        </Layout.Content>
      </Layout>
    </ConfigProvider>
  );
};

export default App